<!DOCTYPE html>
<html>
<head>
  <title>jQuery Operations Lab Page</title>
  <link rel="stylesheet" type="text/css" href="../styles/core.css">
  <!--suppress CssUnusedSymbol -->
  <style type="text/css">
    div#operationPane {
      float: left;
      width: 45%;
    }

    input#operationField {
      width: 90%;
    }

    div#samplePane {
      float: right;
      width: 53%;
    }

    #sampleFrame {
      width: 99%;
      height: 440px;
      background-color: white;
    }

    div#codePane {
      clear: both;
    }

    div#sampleDOMCode pre {
      background-color: white;
    }

    div#resultsPane {
      margin-top: 12px;
      display: none;
    }

    span#jqueryStatement {
      color: maroon;
      font-family: monospace;
    }

    div.buttonBar {
      margin-top: 8px;
    }
  </style>
  <script type="text/javascript" src="../scripts/jquery-1.4.js"></script>
  <script type="text/javascript" src="elements.js"></script>
  <script type="text/javascript" src="../scripts/jqia2.support.js"></script>
  <script type="text/javascript">
    $(function () {

      $.get(
          'dom.sample.html',
          function (data) {
            $('#sampleDOMCode').find('pre').html(data.replace(/</g, '&lt;').replace(/>/g, '&gt;'));
          });

      $('form#selectorForm').submit(function () {
        $('#resultingElements').html('');
        var operation = $.trim($('#operationField').val());
        if (operation.length === 0) return false;
        var wrappedSet = sampleFrame.perform(operation);
        var elements   = wrappedSet.elementsForDisplay();
        var labelText  = elements.length + ' matching element' + (elements.length === 1 ? '' : 's') + ':';
        $('label[for=resultingElements]').html(labelText);
        $.each(elements, function () {
          $('#resultingElements').append($('<div>' + this + '</div>'));
        });
        $('#resultsPane').fadeIn('slow');
        return false;
      });

      $('#restoreButton').click(function () {
        $('#sampleFrame').attr('src', 'dom.sample.page.html');
        $('#resultsPane').hide();
      });

    });
  </script>
</head>

<body class="fancy">

<div id="pageContainer">
  <div id="pageContent">

    <h1>jQuery Operations Lab Page</h1>

    <div data-module="Operation" data-module-id="operationPane">
      <form id="selectorForm" action="#">

        <p>Type any jQuery expression that results in a jQuery wrapped set into the text field below and press the
          Execute button.</p>

        <label for="operationField">Operation:</label><br/>
        <input type="text" id="operationField"/>

        <div class="buttonBar">
          <button type="submit" class="green90x24">Execute</button>
          <button type="button" id="restoreButton" class="green90x24">Restore</button>
        </div>

      </form>

      <div id="resultsPane">
        <label for="resultingElements">X</label>
        <div id="resultingElements"></div>
      </div>

    </div>

    <div data-module="DOM Sample" data-module-id="samplePane">
      <iframe id="sampleFrame" src="dom.sample.page.html" name="sampleFrame" frameborder="0" marginheight="0"
              marginwidth="0"></iframe>
    </div>

    <div data-module="DOM Sample Code" data-module-id="codePane">
      <div id="sampleDOMCode">
        <pre></pre>
      </div>
    </div>

    <div class="footer">jQuery in Action, 2nd edition, sample code<br/>Bear Bibeault and Yehuda Katz</div>

  </div>
</div>

</body>
</html>
